<template>
  <a-row>
    <Nav></Nav>
    <a-col :span="20" class="main-container">
      <div class="main-content bordered-section">
        <h2>学科成绩对比</h2>
        <el-table :data="tableData" border stripe style="width: 100%">
          <el-table-column
            prop="subject"
            label="学科"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="testees"
            label="实考人数"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="absentees"
            label="缺考人数"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="fullMark"
            label="满分"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="highest"
            label="最高分"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="lowest"
            label="最低分"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="average"
            label="平均分"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="rank"
            label="排名"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="excellentRate"
            label="优秀率"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="goodRate"
            label="良好率"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="passRate"
            label="合格率"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="lowRate"
            label="低分率"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="highRate"
            label="超均率"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="stdDeviation"
            label="标准差"
            align="center"
          ></el-table-column>
        </el-table>
        <!-- <h2>学情分析</h2> -->
        <!-- <el-table :data="questionData" border stripe style="width: 100%">
          <el-table-column
            prop="questionType"
            label="题型"
            align="center"
            width="100px"
          ></el-table-column>
          <el-table-column
            prop="questionNumber"
            label="题号"
            align="center"
            width="100px"
          ></el-table-column>
          <el-table-column
            prop="reviewResult"
            label="批阅结果"
            align="center"
            width="100px"
          ></el-table-column>
          <el-table-column
            prop="knowledgePoints"
            label="该题涉及的四级知识点"
            align="center"
          ></el-table-column>
        </el-table> -->
        <a-row justify="center" style="margin-bottom: 16px">
          <a-col :span="12" style="text-align: center">
            <h2>学科平均分对比</h2>
          </a-col>
          <a-col :span="12" style="text-align: center">
            <h2>学业等级分布</h2>
          </a-col>
        </a-row>
        <a-row gutter="16" style="justify-content: center">
          <a-col
            :span="12"
            style="display: flex; justify-content: center; align-items: center"
          >
            <div ref="barChart" style="height: 400px; width: 400px"></div>
          </a-col>
          <a-col
            :span="12"
            style="display: flex; justify-content: center; align-items: center"
          >
            <div
              ref="stackedBarChart"
              style="height: 400px; width: 400px"
            ></div>
          </a-col>
        </a-row>
        <h2>分数分布折线图</h2>
        <div ref="curvedLineChart" style="height: 400px; width: 100%"></div>
      </div>
      <div class="main-content bordered-section">
        <!-- 学科选择按钮 -->
        <div class="subject-selection">
          <button
            v-for="subject in subjects"
            :key="subject"
            :class="{ active: currentSubject === subject }"
            @click="changeSubject(subject)"
          >
            {{ subject }}
          </button>
        </div>

        <!-- 学科折线图 -->
        <h2>{{ currentSubject }}分数分布</h2>
        <div ref="curvedLineChartSub" style="height: 400px; width: 100%"></div>
      </div>
    </a-col>
    <a-col :span="20" class="main-container"> </a-col>
  </a-row>
</template>

<script>
import Nav from "@/components/Nav.vue";
import * as echarts from "echarts";
export default {
  name: "LearningSituAnalysis",
  components: {
    Nav,
  },
  mounted() {
    this.renderBarChart();
    this.renderStackedBarChart();
    this.renderCurvedLineChart();
    this.renderCurvedLineChartSub();
  },
  methods: {
    // 切换学科
    changeSubject(subject) {
      this.currentSubject = subject;
      this.renderCurvedLineChart(); // 保持调用主图表方法
      this.renderCurvedLineChartSub();
    },
    renderBarChart() {
      // 获取容器
      const chartDom = this.$refs.barChart;
      const myChart = echarts.init(chartDom);

      // 配置项
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          min: 40,
          interval: 20,
          name: "分数",
        },
        xAxis: {
          type: "category",
          data: ["语文", "数学", "英语", "物理", "化学", "生物"],
          name: "学科",
        },
        series: [
          {
            name: "班级平均分",
            type: "bar",
            data: [105.3, 97.6, 108.6, 59.7, 70.7, 75.4],
            itemStyle: {
              color: "#f8ac59", // 设置颜色
            },
          },
          {
            name: "校级平均分",
            type: "bar",
            data: [110, 100, 115, 65, 80, 78],
            itemStyle: {
              color: "#3578e5", // 设置颜色
            },
          },
        ],
      };

      // 使用配置项和数据显示图表
      myChart.setOption(option);
    },
    renderStackedBarChart() {
      // 获取容器
      const chartDom = this.$refs.stackedBarChart;
      const myChart = echarts.init(chartDom);

      // 配置项
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["语文", "数学", "英语", "物理", "化学", "生物"],
          name: "学科",
        },
        yAxis: {
          type: "value",
          name: "分数",
          min: 0,
          max: 100,
          interval: 20,
        },
        series: [
          {
            name: "E",
            type: "bar",
            stack: "total",
            data: [10, 5, 10, 5, 5, 5],
            itemStyle: {
              color: "#95a5a6", // 灰色
            },
          },
          {
            name: "D",
            type: "bar",
            stack: "total",
            data: [20, 10, 5, 10, 5, 0],
            itemStyle: {
              color: "#e74c3c", // 红色
            },
          },
          {
            name: "C",
            type: "bar",
            stack: "total",
            data: [10, 15, 20, 15, 25, 15],
            itemStyle: {
              color: "#ff9900", // 橙色
            },
          },
          {
            name: "B",
            type: "bar",
            stack: "total",
            data: [20, 25, 15, 40, 30, 20],
            itemStyle: {
              color: "#3578e5", // 蓝色
            },
          },
          {
            name: "A",
            type: "bar",
            stack: "total",
            data: [40, 45, 50, 30, 35, 60],
            itemStyle: {
              color: "#87CEEB", // 绿色
            },
          },
        ],
      };

      // 使用配置项和数据显示图表
      myChart.setOption(option);
    },
    renderCurvedLineChart() {
      // 获取容器
      const chartDom = this.$refs.curvedLineChart;
      const myChart = echarts.init(chartDom);

      // 配置项
      const option = {
        title: {
          text: "分数分布",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            return `${params[0].name}分: ${params[0].value}人`;
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          name: "分数",
          data: ["0", "100", "200", "300", "400", "500", "600", "700"], // 示例数据
        },
        yAxis: {
          type: "value",
          name: "人数",
          min: 0,
          max: 50,
          interval: 10,
        },
        series: [
          {
            name: "人数",
            type: "line",
            data: [0, 10, 20, 35, 50, 30, 15, 5], // 示例数据
            smooth: true, // 平滑曲线
            itemStyle: {
              color: "#3578e5", // 折线颜色
            },
            areaStyle: {
              color: "rgba(53, 120, 229, 0.2)", // 渐变填充
            },
          },
        ],
      };

      // 使用配置项和数据显示图表
      myChart.setOption(option);
    },
    renderCurvedLineChartSub() {
      const chartDom = this.$refs.curvedLineChartSub; // 使用新的 ref 指向副图表
      const myChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            return `${params[0].name}分: ${params[0].value}人`;
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          name: "分数",
          data: ["0", "100", "200", "300", "400", "500", "600", "700"],
        },
        yAxis: {
          type: "value",
          name: "人数",
          min: 0,
          max: 50,
          interval: 10,
        },
        series: [
          {
            name: "人数",
            type: "line",
            data: this.subjectData[this.currentSubject], // 根据选中的学科获取数据
            smooth: true, // 平滑曲线
            itemStyle: {
              color: "#3578e5", // 折线颜色
            },
            areaStyle: {
              color: "rgba(53, 120, 229, 0.2)", // 渐变填充
            },
          },
        ],
      };

      myChart.setOption(option);
    },
  },
  data() {
    return {
      tableData: [
        {
          subject: "语文",
          testees: 54,
          absentees: 0,
          fullMark: 150,
          highest: 138,
          lowest: 50,
          average: 105.3,
          rank: 3,
          excellentRate: "10%",
          goodRate: "45%",
          passRate: "85%",
          lowRate: "2%",
          highRate: "15%",
          stdDeviation: 18.2,
        },
        {
          subject: "数学",
          testees: 54,
          absentees: 0,
          fullMark: 150,
          highest: 145,
          lowest: 39,
          average: 97.6,
          rank: 2,
          excellentRate: "7.41%",
          goodRate: "35.19%",
          passRate: "66.67%",
          lowRate: "3.7%",
          highRate: "11.79%",
          stdDeviation: 21.4,
        },
        {
          subject: "英语",
          testees: 54,
          absentees: 0,
          fullMark: 150,
          highest: 142,
          lowest: 45,
          average: 108.6,
          rank: 1,
          excellentRate: "12%",
          goodRate: "50%",
          passRate: "90%",
          lowRate: "1%",
          highRate: "20%",
          stdDeviation: 17.8,
        },
        {
          subject: "物理",
          testees: 54,
          absentees: 0,
          fullMark: 100,
          highest: 94,
          lowest: 29,
          average: 59.7,
          rank: 1,
          excellentRate: "5.56%",
          goodRate: "22.22%",
          passRate: "48.15%",
          lowRate: "12.96%",
          highRate: "17.72%",
          stdDeviation: 14.1,
        },
        {
          subject: "化学",
          testees: 54,
          absentees: 0,
          fullMark: 100,
          highest: 93,
          lowest: 48,
          average: 70.7,
          rank: 2,
          excellentRate: "12.96%",
          goodRate: "57.41%",
          passRate: "81.48%",
          lowRate: "0%",
          highRate: "11.59%",
          stdDeviation: 11.5,
        },
        {
          subject: "生物",
          testees: 54,
          absentees: 0,
          fullMark: 100,
          highest: 96,
          lowest: 55,
          average: 75.4,
          rank: 2,
          excellentRate: "15%",
          goodRate: "60%",
          passRate: "92%",
          lowRate: "0%",
          highRate: "10%",
          stdDeviation: 10.4,
        },
        {
          subject: "总分",
          testees: 54,
          absentees: 0,
          fullMark: 700,
          highest: 625,
          lowest: 300,
          average: 525,
          rank: 2,
          excellentRate: "10%",
          goodRate: "40%",
          passRate: "80%",
          lowRate: "1%",
          highRate: "15%",
          stdDeviation: 50.6,
        },
      ],
      questionData: [
        {
          questionType: "单选题",
          questionNumber: "1",
          reviewResult: "20%",
          knowledgePoints: "三角形的中位线、三角形的周长",
        },
        {
          questionType: "单选题",
          questionNumber: "2",
          reviewResult: "20%",
          knowledgePoints: "相似三角形的判定",
        },
        {
          questionType: "单选题",
          questionNumber: "3",
          reviewResult: "20%",
          knowledgePoints: "平行线的性质、平行四边形的性质、相似三角形的判定",
        },
        {
          questionType: "单选题",
          questionNumber: "4",
          reviewResult: "20%",
          knowledgePoints: "平行四边形的性质、相似三角形的性质",
        },
        {
          questionType: "单选题",
          questionNumber: "5",
          reviewResult: "20%",
          knowledgePoints: "相似三角形的性质、相似三角形的判定",
        },
        {
          questionType: "单选题",
          questionNumber: "6",
          reviewResult: "20%",
          knowledgePoints: "相似图形的性质、相似三角形的判定",
        },
        {
          questionType: "单选题",
          questionNumber: "7",
          reviewResult: "20%",
          knowledgePoints: "正方形的性质、相似三角形的性质、相似三角形的判定",
        },
        {
          questionType: "填空题",
          questionNumber: "8",
          reviewResult: "20%",
          knowledgePoints:
            "平行线的性质、线段垂直平分线的性质、相似三角形的判定",
        },
        {
          questionType: "填空题",
          questionNumber: "9",
          reviewResult: "20%",
          knowledgePoints:
            "平行四边形的性质、相似三角形的性质、相似三角形的判定",
        },
        {
          questionType: "填空题",
          questionNumber: "10",
          reviewResult: "20%",
          knowledgePoints:
            "平行四边形的性质、相似三角形的性质、相似三角形的判定",
        },
      ],
      subjects: ["语文", "数学", "英语", "物理", "化学", "生物"], // 学科列表
      currentSubject: "语文", // 默认显示语文的数据
      // 不同学科的分数分布数据
      subjectData: {
        语文: [0, 10, 20, 35, 50, 30, 15, 5],
        数学: [0, 5, 15, 30, 40, 35, 20, 10],
        英语: [0, 12, 18, 32, 45, 25, 10, 6],
        物理: [0, 8, 25, 40, 45, 30, 18, 10],
        化学: [0, 5, 25, 30, 45, 38, 20, 8],
        生物: [0, 10, 22, 30, 50, 33, 15, 7],
      },
    };
  },
};
</script>

<style scoped>
/* 通用样式 */
.bordered-section {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* .section-title-h3 {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 16px;
  color: black;
  padding-bottom: 8px;
} */

.main-container {
  background-color: #f9f9f9;
  padding: 20px;
  height: 100%;
}
</style>
